<template>
  <div>
    <h3 class="dialog-plate-title"><span>结果上传</span></h3>
    <el-button type="primary" @click="insertHOtherCheck">新增</el-button>
    <el-table :data="tableList" stripe border class="company-table">
      <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
      <el-table-column prop="wbc" label="白细胞计数" sortable min-width="50"></el-table-column>
      <el-table-column prop="platelet" label="血小板" sortable min-width="50"></el-table-column>
      <el-table-column prop="hct" label="HCT" sortable width="90"></el-table-column>
      <el-table-column prop="triglyceride" label="甘油三脂" sortable min-width="50"></el-table-column>
      <el-table-column prop="lp" label="LP" sortable width="80"></el-table-column>
      <el-table-column prop="sod" label="SOD" sortable width="90"></el-table-column>
      <el-table-column prop="mda" label="MDA" sortable width="90"></el-table-column>
      <el-table-column prop="ldl" label="低密脂蛋白" sortable min-width="50"></el-table-column>
      <el-table-column prop="cholesterol" label="胆固醇" sortable min-width="50"></el-table-column>
      <el-table-column prop="checkDate" label="检测日期" sortable min-width="50">
        <template slot-scope="scope">
          {{timestampToTime(scope.row.checkDate,'yyyy-mm-dd')}}
        </template>
      </el-table-column>
      <el-table-column prop="uploadDate" label="上传日期" sortable min-width="100">
        <template slot-scope="scope">
          {{timestampToTime(scope.row.uploadDate,'yyyy-mm-dd hh:mm')}}
        </template>
      </el-table-column>
      <el-table-column prop="uploadUserName" label="上传人" sortable min-width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" align="left" min-width="75">
          <template slot-scope="scope">
            <el-button  @click="showDialog(scope.row)" type="text" size="small">编辑</el-button>
          </template>         
      </el-table-column>
    </el-table>
    <el-dialog :title="dialog.title" :visible.sync="dialog.open"  width="90%" top="70px" :close-on-clcick-modal="false" class="bodyNopaddingTop">
      <h3 class="dialog-plate-title mt-1"><span>基本信息</span></h3>
      <el-form :inline="true" :model="dialog.formData" label-width="140px" class="demo-ruleForm">
        <el-form-item label="白细胞计数" prop="wbc" ><el-input v-model="dialog.formData.wbc"  class="width220"></el-input></el-form-item>
        <el-form-item label="血小板" prop="platelet" ><el-input v-model="dialog.formData.platelet" class="width220"></el-input></el-form-item>
        <el-form-item label="HCT" prop="hct" ><el-input v-model="dialog.formData.hct" class="width220"></el-input></el-form-item>
        <el-form-item label="甘油三脂" prop="triglyceride" ><el-input v-model="dialog.formData.triglyceride" class="width220"></el-input></el-form-item>
        <el-form-item label="LP" prop="lp" ><el-input v-model="dialog.formData.lp" class="width220"></el-input></el-form-item>
        <el-form-item label="SOD" prop="sod" ><el-input v-model="dialog.formData.sod" class="width220"></el-input></el-form-item>
        <el-form-item label="MDA" prop="mda" ><el-input v-model="dialog.formData.mda" class="width220"></el-input></el-form-item>
        <el-form-item label="低密脂蛋白" prop="ldl" ><el-input v-model="dialog.formData.ldl" class="width220"></el-input></el-form-item>
        <el-form-item label="胆固醇" prop="cholesterol" ><el-input v-model="dialog.formData.cholesterol" class="width220"></el-input></el-form-item>
        <el-form-item label="检测日期" prop="checkDate" ><el-date-picker type="date" v-model="dialog.formData.checkDate" placeholder="选择日期" class="width220"></el-date-picker></el-form-item>
        <el-form-item label="上传人"><el-input v-model="dialog.formData.uploadUserName" disabled class="width220"></el-input></el-form-item>
        <el-form-item label="记录日期" prop="uploadDate" >
          <el-date-picker type="date" v-model="dialog.formData.uploadDate" placeholder="选择日期" format="yyyy-MM-dd hh:mm:ss" disabled class="width220"/>
        </el-form-item>
        <el-form-item class="form-item-block text-center">
          <el-button type="primary" @click="submit" >提交</el-button>
        </el-form-item>
      </el-form>
      <h3 class="dialog-plate-title mt-1"><span>附件上传</span></h3>
      <div  v-for="(item,index) in fileList"  :key="index" class="pull-left mr-1">
        <el-image style="width: 148px; height: 148px"  :src="item" fit="fill" :preview-src-list="fileList"></el-image>
      </div>
      <el-upload class="avatar-uploader" :action="actionUrl"  ref="refImageUpload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"  :on-error="uploadError"> 
        <i  class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      
   </el-dialog>
   <!-- 图片查看 -->
  </div>
</template>
<script>
import {externalHospitalReportList,insertExternalHospitalReport,externalHospitalReportUpload,externalHospitalReportUploadList,updateBloodEHR} from "plugins/axios/inquiryRecord.js"
export default {
  props:{
    idNo:{
      type:[String,Number]
    },
    type:{
      type:[String,Number]
    }
  },
  data(){
    return {
      dialog:{
        title:'',
        open:false,
        formData:{}
      },
      tableList:[],
      actionUrl:'',
      fileList:[]
    }
  },
  created(){
  },
  mounted(){},
  watch:{},
  computed:{},
  methods:{
    init(){
     this.getList();
    },
    //点击新增按钮
    insertHOtherCheck(type){
      let self = this;
      insertExternalHospitalReport(self.idNo,self.type).then(res=>{
        self.getList(content=>{
          self.dialog.title="新增外院报告-血液";
          self.dialog.open=true;
          self.dialog.formData={...content}
          self.actionUrl=externalHospitalReportUpload(content.id,self.type)
          self.externalHospitalReportUploadList()
        })
      })
    },
    /**获取列表*/ 
    getList(cb){
      let self = this;
      externalHospitalReportList(self.idNo,self.type).then(res=>{
        self.tableList= res.content;
        cb&&cb(res.content&&res.content.length>0?res.content[0]:{})
         
      })
    },
    /**获取附件上传列表*/ 
    externalHospitalReportUploadList(){
       let self = this;
      externalHospitalReportUploadList(self.type,self.dialog.formData.id).then(res=>{
        self.fileList=res.content[0].images;
      })
    },
    /**点击详情按钮*/ 
    showDialog(row){
      this.dialog.title="修改外院报告-血液";
      this.dialog.open=true;
      this.dialog.formData={...row}
      this.actionUrl=externalHospitalReportUpload(row.id,this.type)
      this.externalHospitalReportUploadList()
    },
    submit(){
      let self=this,
      postData={...self.dialog.formData};
      updateBloodEHR(postData).then(res=>{
        self.dialog.open = false;
        self.$message.success(`${this.dialog.title}成功`);
        self.init();
      })
    },
    //图片上传成功
    handleAvatarSuccess(response, file, fileList){
      this.$refs.refImageUpload.clearFiles()
      this.externalHospitalReportUploadList()
    },
    beforeAvatarUpload(){},
    //上传视频失败
    uploadError(err,file, fileList){
       this.$message.error(err)
    },
  }
}
</script>
<style scoped>

</style>